<template>
  <section class="apply-wrapper nb-shadow">
    <el-tabs v-model="activeName" class="none-tabs">
      <div slot="bar" style="position: absolute;right: 20px;top: 10px;">
        <el-button class="button-new-tag" type="text" @click="$router.go(-1)">返回</el-button>
        <el-button class="button-new-tag" type="text" @click="exportData">导出</el-button>      </div>
      <el-tab-pane  class="handle-wrapper" name="1">
        <se-content ref="applyContent" disabled>
          <se-form v-model="applyModel.name" placeholder="客户姓名"></se-form>
          <se-form v-model="applyModel.mobile" placeholder="客户手机号"></se-form>
          <se-form v-model="applyModel.isNew" type="select" :options="newOption" placeholder="新/老客户"></se-form>
          <se-form v-model="applyDate" type="daterange" start="报名开始时间" end="报名结束时间" ></se-form>
          <template slot="button">
            <el-button round plain type="primary" @click="queryApply">查询</el-button>
            <el-button round plain @click="resetApply" >重置</el-button>
          </template>
        </se-content>
        <apply-list ref="apply"></apply-list>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import ApplyList from './template/applyList.vue'
  import SeContent from '@/components/se-content.vue'
  import SeForm from '@/components/se-form.vue'
  import Mixin from '@/common/mixin'
  export default {
    data () {
      return {
        activeName: '1',
        applyModel: {
          name: '',
          mobile: '',
          isNew: '',
          signupBeginTime: '',
          signupEndTime: ''
        },
        newOption: [{
          value: '1',
          label: '活动新获客户'
        }, {
          value: '0',
          label: '老客户'
        }],
        applyDate: ''
      }
    },
    mixins: [Mixin],
    components: {
      ApplyList,
      SeContent,
      SeForm
    },
    methods: {
      queryApply () {
        this.applyModel.signupBeginTime = this.applyDate[0] || ''
        this.applyModel.signupEndTime = this.applyDate[1] || ''
        this.$refs.apply.search(this.applyModel)
      },
      resetApply () {
        this.reset(this.$refs.applyContent.$children[0])
        this.queryApply()
      },
      exportData () {
        this.download('/http/saas/marketing/exportSignUp.json?data=', this.applyModel)
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.apply-wrapper{
  background: white;
  .self-wrapper{
  }
}
</style>
